
  <template>
 <!-- 面包屑（放到你想要放的template中的位置） -->
 <el-breadcrumb separator=">">
     <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
     <template v-for="(item, index) in breadList">
       <el-breadcrumb-item
         v-if="item.name"
         :key="index"
         :to="item.path"
       >{{ item.meta.title }}</el-breadcrumb-item>
     </template>
   </el-breadcrumb>
  </template>
<script setup>
import {
  ref,
  computed,
  onMounted,
  watch,
} from "vue";
import { useRouter,useRoute } from 'vue-router';

let router = useRouter();
let route = useRoute();
let breadList =ref([])
let getMatched=()=>{
  console.log(route.matched);
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}
onMounted(()=>{
  getMatched();
})

watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

</script>

 <style lang="less" >
   .breadcrumb_box {
    .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a{
        color: #fff;
    }
   }
</style>
<style lang="less" scoped>
  .breadcrumb_box {
      width: auto;
      display: flex;
      align-items: center;
      padding:0 20px;
      font-size:16px;
      height:80px;
      line-height:50px;
      background:#545c64;
      .el-breadcrumb__inner span{
        color: #fff;
      }
  }
  </style>